<template>
  <div id="bow">
    <div class="item">
      <p>预约设置</p>
      <span class="right">状态:</span>
      <el-switch v-model="value"
                 active-color="#13ce66"
                 inactive-color="gray">
      </el-switch>
      <span class="left">已开启预约服务</span>
    </div>
    <div class="item">
      <p>取号设置</p>
      <span class="right">状态:</span>
      <el-switch v-model="value1"
                 active-color="#13ce66"
                 inactive-color="gray">
      </el-switch>
      <span class="left">已开启取号服务</span>
    </div>

    <div class="item">
      <p>打烊设置</p>
      <span class="right">状态:</span>
      <el-switch v-model="value2"
                 active-color="#13ce66"
                 inactive-color="gray">
      </el-switch>
      <span class="left">正常营业</span>
    </div>

  </div>
</template>
<script>
export default {
  data: function () {
    return {
      value: true,
      value1: true,
      value2: true,
    };
  },
};
</script>

<style scoped>
/* #bow{
  margin-right: 8px;
} */
.item {
  width: 98%;
  border: 1px solid rgb(240, 240, 240);
  height: 180px;
  margin-left: 20px;
  color: gray;
  font-size: 17px;
}
p {
  margin-left: 250px;
  margin-top: 20px;
  margin-bottom: 30px;
}
.right {
  margin-right: 60px;
  margin-left: 40px;
}
.left {
  margin-left: 60px;
}
</style>